<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>住户缴款列表页面</title>
    <!-- 引入 css -->
    <link href="/admin/plugin/wangEditor/style.css" rel="stylesheet">
    <!-- 引入 js -->
    <script src="/admin/plugin/wangEditor/index.js"></script>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>
	<link rel="stylesheet" href="/admin/js-css/css/backColor.css" media="all">


    <!--    引入Layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <style type="text/css">
        .layui-table-click {
            background-color:cadetblue !important;
            color:white;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.1);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(144, 147, 153, .3);
            border-radius: 4px;
            cursor: pointer;
        }
        .layui-form-label {
            float: left;
            display: block;
            padding: 7px 1px;
            width: 100px;
            font-weight: 400;
            line-height: 14px;
            text-align: right;
        }

        /**输入框高度设置**/
        .layui-input, .layui-select, .layui-textarea {
            height: 30px;
            line-height: 30px\9;
        }
        /**按钮样式设置**/
        .layui-btn {
            height: 30px;
            line-height: 30px;
            font-size: 13px;
        }
        .layui-btn+.layui-btn {
            margin-left: 0px;
        }

        .layui-table, .layui-table-view {
            margin: 0px 0;
        }

        button{
            height: 30px;
            line-height: 30px;
            font-size: 13px;
        }

        /**列表内容超出自动换行**/
        /*.layui-table-cell {
            height: auto;
            overflow:visible;white-space:normal;text-overflow:clip;
            word-break: break-all;
        }*/

        body{
            background: #dfefff;
        }
        .el-checkbox__inner {
            border: 2px solid #303133;
        }
    </style>


</head>
<body>
    <div id="app">
        <div style="font-size: 16px;" >{{homeInfo.xqmc}} - {{homeInfo.ldmc}} - {{homeInfo.dymc}} - {{homeInfo.name}}/{{homeZhuhu.name}} {{homeZhuhu.lxdh}}</div>
        <div v-if="isshow">
            <div class="demoTable" style="padding: 5px;">
                <div class="layui-inline" v-for="(item,index) in listSearch" style="margin: 3px 0px;">
                    <label class="layui-form-label" >{{item.lable}}：</label>

                    <div class="layui-input-inline" v-if="item.type == '0'" >
                        <input class="layui-input"  v-model="searchInputDtos[item.key].value" :name="item.key"  autocomplete="off">
                    </div>

                    <div class="layui-input-inline" v-if="item.type == '1' && item.searchTypeForDateDto.startShow" >
                        <input class="layui-input"   t=date v-model="searchInputDtos[item.key].searchTypeForDateDto.start" :id="item.key+'date-start'" :name="item.key"  autocomplete="off">
                    </div>

                    <div class="layui-input-inline" v-if="item.type == '1' && item.searchTypeForDateDto.endShow" >
                        <input class="layui-input"  t=date v-model="searchInputDtos[item.key].searchTypeForDateDto.end" :id="item.key+'date-end'" :name="item.key"  autocomplete="off">
                    </div>

                    <div class="layui-input-inline" v-if="item.type == '5' && item.searchTypeForDateDto.startShow" >
                        <input class="layui-input"  t=datetime v-model="searchInputDtos[item.key].searchTypeForDateDto.start" :id="item.key+'date-start'" :name="item.key"  autocomplete="off">
                    </div>
                    <div class="layui-input-inline" v-if="item.type == '5' && item.searchTypeForDateDto.endShow" >
                        <input class="layui-input"   t=datetime v-model="searchInputDtos[item.key].searchTypeForDateDto.end" :id="item.key+'date-end'" :name="item.key"  autocomplete="off">
                    </div>

                    <div class="layui-input-inline" v-if="item.type == '6' && item.selectoptions == 0"  >
                        <input class="layui-input"  v-model="searchInputDtos[item.key].value" :name="item.key"  autocomplete="off">
                    </div>
                    <div class="layui-input-inline" v-if="item.type == '8' && item.selectoptions == 0"  >
                        <input class="layui-input"  v-model="searchInputDtos[item.key].value" :name="item.key"  autocomplete="off">
                    </div>

                    <div class="layui-input-inline" v-if="item.type == '6' && item.selectoptions != 0"  >
                        <select :name="item.key"  v-model="searchInputDtos[item.key].value"  class="layui-input" style="display: block;width: 160px;" >
                            <option></option>
                            <option :value="vm.value" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</option>
                        </select>
                    </div>

                    <div class="layui-input-inline" v-if="item.type == '8' && item.selectoptions != 0" >
                        <select :name="item.key"  v-model="searchInputDtos[item.key].value"  class="layui-input"  style="display: block;width: 160px;" >
                            <option></option>
                            <option :value="vm.value" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</option>
                        </select>
                    </div>

                </div>

                <template v-if="JSON.stringify(listSearch) != '{}'">
                    <button class="layui-btn"  onclick="vm.getListdata()">搜索</button>
                    <button class="layui-btn"  onclick="vm.f_search_advanced()">高级检索</button>
                    <button class="layui-btn"  onclick="vm.f_search_custom()">自定义搜索</button>
                </template>


            </div>


            <el-row  >


                <el-button type="primary" @click="callFun('add2jiaokuan')" size="small" >添加</el-button>

            </el-row>
            <el-table
                    ref="tipsTable"
                    size="small"
                    :data="tableData"
                    :height="tableHeight"
                    @selection-change="handleSelectionChange"
                    @row-click="rowClick"
                    :row-style="rowClass"
                    @expand-change="expandChange"
                    style="width: 100%;margin-top: 5px;">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>

                <el-table-column type="expand">
                    <template slot-scope="props">
                        <div style="margin-left: 100px;" >缴款记录：</div>
                        <div style="margin-left: 100px;">
                            <el-table
                                    :data="props.row.listdetail"
                                    style="width: 100%">
                                <el-table-column
                                        prop="kxlx"
                                        label="款项类型"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="sfxm"
                                        label="收费项目"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="sj"
                                        label="时间"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="jkqj"
                                        label="缴款期间"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="dj"
                                        label="单价">
                                </el-table-column>
                                <el-table-column
                                        prop="sl"
                                        label="数量">
                                </el-table-column>
                                <el-table-column
                                        prop="fee"
                                        label="金额">
                                </el-table-column>
                                <el-table-column
                                        prop="bz"
                                        label="备注">
                                </el-table-column>
                            </el-table>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column
                        label="缴款情况"
                        prop="is_all_jk">
                    <template slot-scope="scope" >
                        <template v-if="scope.row.isydsj == '已打印'" >
                            <img  src="/admin/html/module/sichuangwuye/zhuhu/print.jpeg"  width="15px"  height="15px">
                        </template>
                        <template v-else>
                            <img v-if="scope.row.is_all_jk == '否'" src="/admin/js-css/img/skin_/delete.gif">
                            <img v-if="scope.row.is_all_jk == '是'" src="/admin/js-css/img/skin_/ok2.gif">
                        </template>

                    </template>
                </el-table-column>
                <el-table-column
                        label="年月"
                        prop="ny">
                </el-table-column>
                <el-table-column
                        label="姓名"
                        prop="xm">
                </el-table-column>

                <el-table-column
                        width="220px"
                        label="费用名称"
                        prop="fymc">
                </el-table-column>
                <el-table-column
                        label="单价"
                        prop="dj">
                </el-table-column>
                <el-table-column
                        label="数量"
                        prop="sl">
                </el-table-column>

                <el-table-column
                        label="应交"
                        prop="yj">
                </el-table-column>
                <el-table-column
                        label="已交"
                        prop="yijiao">
                </el-table-column>
                <el-table-column
                        label="未交"
                        prop="weij">
                </el-table-column>

                <el-table-column
                        width="260px"
                        label="款项期间"
                        prop="kxqj">
                </el-table-column>


                <el-table-column
                        label="滞纳金"
                        prop="zhinj">
                </el-table-column>

                <el-table-column
                        prop="zt"
                        label="状态">

                    <template slot-scope="scope" >
                        <div v-if="scope.row.zt == ''">正常</div>
                        <div v-else >{{scope.row.zt}}</div>
                    </template>
                </el-table-column>

                <el-table-column
                        label="是否已结帐"
                        prop="is_jz">
                </el-table-column>

                <el-table-column
                        label="备注"
                        prop="bz">
                </el-table-column>

            </el-table>

            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next,total"
                    :page-size="pageSize"
                    :total="total">
            </el-pagination>
        </div>

    </div>
</body>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            listSearch: {}//默认查询的字段
            , searchInputDtos: {},
            tableData: [],
            parmsData:{},
            pageNumber:1,
            total:0,
            pageSize:0,
            multipleSelection:[],
            tableId:getTableId("682"),
            isshow:false,
            baobiaoUrl:"",
            buttons:[],
            tableHeight:0,
            chooseArr:[],
            selectRow: [],
            homeInfo:{},
            homeZhuhu:{},
        },
        created(){
            this.tableHeight = parseInt(window.screen.height)-480;
            this.parmsData = getParams();
            if(this.parmsData.type == "5"){
                this.isshow = true;
                this.getCustomFields();
            }

        },
        methods:{
            callFun(methodName){
              this[methodName]();
            },
            // 点击表格行
            rowClick(row) {
                this.$refs.tipsTable.toggleRowSelection(row);
            },
            // 多选高亮选中行
            rowClass({row, rowIndex}){
                if(this.selectRow.includes(rowIndex)){
                    return { "background-color": "#409eff8a" }
                }
            },
            async expandChange(t,expt){
                if(expt.length>0){
                    const res = await postWebCustom(getTableId("973"),{id:t.id});
                    if(res.data.length>0){
                        for(let a=0;a<this.tableData.length;a++){
                            if(this.tableData[a].id == t.id){
                                this.tableData[a].listdetail = res.data;
                            }
                        }
                    }
                }

            },
            async getCustomFields(){
                const res = await postBody("/admin/api/DataManagementController/getCustomFields",{tableId: getTableId("682"),mapdata:{}})
                vm.listSearch = res.data.listSearch;
                vm.searchInputDtos = res.data.listSearch;
                this.loadDateInput();
                this.getListdata();
            },
            handleSelectionChange(val){
                this.chooseArr = val;
                this.multipleSelection = [];
                for(let a=0;a<val.length;a++){
                    this.multipleSelection.push(val[a].id);
                }
            },
            async add2jiaokuan(){
                const res = await postWebCustom(getTableId("2025"),{ids:""+this.multipleSelection,fjid:this.parmsData.id})
                top.alert(res.msg);
            },
            //开始翻页
            handleCurrentChange(val){
                this.pageNumber = val;
                this.getListdata();
            },
            async getListdata(){
                let i = load();
                this.searchInputDtos["is_all_jk"] = {"key":"is_all_jk",value:"0",type:"6"};
                const res = await postWebCustom(getTableId("695"),{type:this.parmsData.type,id:this.parmsData.id,pageNumber:""+this.pageNumber,searchInputDtos:JSON.stringify(this.searchInputDtos)})
                layer.close(i);
                this.tableData = res.data.rows;
                this.total = parseInt(res.data.total);
                this.pageSize = parseInt(res.data.pageSize);
                this.baobiaoUrl = res.data.routing;


                this.$nextTick(function (){
                    //默认勾选所有记录
                    for(let a=0;a<vm.tableData.length;a++){
                        vm.$refs.tipsTable.toggleRowSelection(vm.tableData[a]);
                    }
                });

                //获取当前所在的房间信息
                let resda = await listAdmin(getTableId("627"),"id",{"id":this.parmsData.id});
                if(resda.code == 1){
                    if(resda.data.length>0){
                        this.homeInfo = resda.data[0];
                        let resdazh = await listAdmin(getTableId("658"),"id",{"fjid":this.homeInfo.id});
                        if(resdazh.code == 1){
                            this.homeZhuhu = resdazh.data[0];
                        }
                    }
                }
            },
            f_search_advanced() {
                let btn = {
                    btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        //按钮【按钮一】的回调
                        let win = getTopIframe(layero);
                        let data = win.getData();
                        vm.searchInputDtos = data;
                        vm.getListdata();
                    }
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };
                top.data.tableId = vm.tableId;
                top.f_layer_open_get("/admin/html/dataManagement/advancedRetrieval.html", "40%", "60%", function () {

                }, btn, "高级检索")
            },
            f_search_custom() {
                let btn = {
                    btn: ['关闭']
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };
                top.data.custom = "IS_SEARCH";
                top.data.tableId = getTableId("682");
                top.f_layer_open_get("/admin/html/dataManagement/custom_search.html", "80%", "65%", function () {

                }, btn, "自定义搜索")
            },
            loadDateInput(){
                layui.use(['table', 'jquery', 'laydate'],function (){
                    var laydate = layui.laydate;
                    //初始化日期框
                    vm.$nextTick(function () {
                        $("[t=date]").each(function (index, element) {
                            let name = $(this).attr("name");
                            let id = $(this).attr("id");
                            let dt = "start";
                            if (id.endsWith("end")) {
                                dt = "end";
                            }
                            //日期常规用法
                            laydate.render({
                                elem: '#' + id,
                                done: function (value, date, endDate) {
                                    vm.searchInputDtos[name].searchTypeForDateDto[dt] = value;//设置vue数据对象的值
                                }
                            });
                        });

                        $("[t=datetime]").each(function (index, element) {
                            let name = $(this).attr("name");
                            let id = $(this).attr("id");
                            let dt = "start";
                            if (id.endsWith("end")) {
                                dt = "end";
                            }
                            laydate.render({
                                elem: '#' + id,
                                type: 'datetime',
                                done: function (value, date, endDate) {
                                    vm.searchInputDtos[name].searchTypeForDateDto["end"] = value;//设置vue数据对象的值
                                }
                            });
                        });
                    })
                });

            }
        },
        watch:{
            chooseArr(data){
                this.selectRow = [];
                if (data.length > 0) {
                    data.forEach((item, index) => {
                        this.selectRow.push(this.tableData.indexOf(item));
                    });
                }
            }
        }
    });
</script>
</html>